<template>
  <div>
    <h1>{{ userInfoStore.userInfo.username }}</h1>
    <button
      :class="{ active: userInfoStore.userInfo.id === 1 }"
      @click="userInfoStore.setUserInfo({ id: 1, username: 'Bob' })"
    >
      Bob
    </button>
    <button
      :class="{ active: userInfoStore.userInfo.id === 2 }"
      @click="userInfoStore.setUserInfo({ id: 2, username: 'Kevin' })"
    >
      Kevin
    </button>
    <button
      :class="{ active: userInfoStore.userInfo.id === 3 }"
      @click="userInfoStore.setUserInfo({ id: 3, username: 'Methaw' })"
    >
      Methaw
    </button>

    <hr />
    <comment-one></comment-one>
  </div>
</template>

<script setup>
import useUserInfo from './store/user';
import CommentOne from './components/CommentOne';

const userInfoStore = useUserInfo();
</script>

<style lang="scss" scoped>
.active {
  background-color: #000;
  color: #fff;
}
</style>
